<template>
  <div class="common-layout">
    <el-container>
      <Transition>
        <el-aside width="auto" >
          <div class="logo">
            <el-icon @click="this.showSide = !this.showSide" v-if="!showSide"><Fold /></el-icon>
            <el-icon @click="this.showSide = !this.showSide" v-else><Expand /></el-icon>
            <div class="logo-text">
              <el-avatar>{{userInfo.userType}}</el-avatar>
              <div v-show="!showSide">{{userInfo.userNickName}}</div>
              <div v-show="!showSide">{{ip}}</div>
              <div v-show="!showSide">{{userInfo.loginTime}}</div>
            </div>
          </div>
          <!-- menu -->
          <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="showSide">
            <el-sub-menu index="1">
              <template #title><el-icon><HomeFilled /></el-icon><span>首页</span></template>
              <el-menu-item-group>
                <!-- <template #title><span>hahhaha</span></template> -->
                <el-menu-item index="1-1" @click="this.$router.push('/Absurd')">首页</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="2" disabled>
              <template #title><el-icon><Menu /></el-icon><span>业务管理</span></template>
              <el-menu-item-group>
                <!-- <template #title><span>hahhaha</span></template> -->
                <el-menu-item index="2-1">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="3" disabled>
              <template #title><el-icon><UserFilled /></el-icon><span>账号管理</span></template>
              <el-menu-item-group>
                <template #title><span>管理员</span></template>
                <el-menu-item index="3-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>用户</span></template>
                <el-menu-item index="3-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="4" disabled>
              <template #title><el-icon><Histogram /></el-icon><span>数据资料</span></template>
              <el-menu-item-group>
                <template #title><span>订单</span></template>
                <el-menu-item index="4-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>物流</span></template>
                <el-menu-item index="4-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            
            <el-sub-menu index="5" disabled>
              <template #title><el-icon><TrendCharts /></el-icon><span>财务管理</span></template>
              <el-menu-item-group>
                <template #title><span>订单</span></template>
                <el-menu-item index="5-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>物流</span></template>
                <el-menu-item index="5-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="6" disabled>
              <template #title><el-icon><QuestionFilled /></el-icon><span>反馈资料</span></template>
              <el-menu-item-group>
                <template #title><span>订单</span></template>
                <el-menu-item index="6-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>物流</span></template>
                <el-menu-item index="6-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="7">
              <template #title><el-icon><HelpFilled /></el-icon><span>DIY管理</span></template>
              <el-menu-item-group>
                <template #title><span>客户端</span></template>
                <el-menu-item index="7-1" @click="$router.push('/Absurd/app')">APP</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="8" disabled>
              <template #title><el-icon><Document /></el-icon><span>附件管理</span></template>
              <el-menu-item-group>
                <template #title><span>订单</span></template>
                <el-menu-item index="8-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>物流</span></template>
                <el-menu-item index="8-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="9" disabled>
              <template #title><el-icon><List /></el-icon><span>系统日志</span></template>
              <el-menu-item-group>
                <template #title><span>订单</span></template>
                <el-menu-item index="9-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>物流</span></template>
                <el-menu-item index="9-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="10" disabled>
              <template #title><el-icon><Tools /></el-icon><span>系统管理</span></template>
              <el-menu-item-group>
                <template #title><span>订单</span></template>
                <el-menu-item index="10-1">item one</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>物流</span></template>
                <el-menu-item index="10-2">item one</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="11">
              <template #title><el-icon><Warning /></el-icon><span>关于</span></template>
              <el-menu-item-group>
                <template #title><span>我们</span></template>
                <el-menu-item index="11-1">运营</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group>
                <template #title><span>系统</span></template>
                <el-menu-item index="11-2">关于作者</el-menu-item>
                <el-menu-item index="11-2" @click="$router.push('/Absurd/about')">关于系统</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

          </el-menu>
        </el-aside>
      </Transition>
      <el-container>
        <!-- header -->
        <el-header :style="{background:homeColor}">
          <!-- 系统名称 -->
          <el-button class="sysBackName" style="border: none;background: none;" plain title="系统">
            {{systemInfo.systemName}}
          </el-button>
          <div class="sysBackBut">
            <!-- 全屏按钮 -->
            <el-button @click="fullOrExit" style="border: none;background: none;" plain title="全屏">
              <el-icon><FullScreen /></el-icon>
            </el-button>
            <!-- color -->
            <el-dropdown>
              <el-button style="border: none;background: none;" plain>
                <el-icon>
                  <svg t="1715248612680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5393" width="200" height="200"><path d="M487.2192 746.5728a212.55168 212.55168 0 1 1-212.49536-212.49536H487.2192v212.49536z" fill="#6CADFF" p-id="5394"></path><path d="M534.47168 746.5728a212.55168 212.55168 0 1 0 212.49536-212.49536H534.528v212.49536h-0.05632z" fill="#20D14F" p-id="5395"></path><path d="M487.2192 274.3296a212.55168 212.55168 0 1 0-212.49536 212.49536H487.2192V274.27328v0.05632z" fill="#FF7077" p-id="5396"></path><path d="M534.47168 274.3296a212.55168 212.55168 0 1 1 212.49536 212.49536H534.528V274.27328l-0.05632 0.05632z" fill="#FFCC1E" p-id="5397"></path></svg>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-radio-group v-model="homeColor">
                    <el-radio v-for="item in colors" :key="item.value" :value="item.value" @click="changeColor(item.value)">
                      <el-tag :color="item.value">{{ item.label }}</el-tag>
                    </el-radio>
                  </el-radio-group>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- set -->
            <el-dropdown>
              <el-button style="border: none;background: none;" plain>
                <el-icon><SwitchButton /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <!-- main -->
        <el-main>
          <!-- 子路由标题 -->
          <el-page-header @back="goBack">
            <template #content>
              <div class="title">
                <span class="text-large font-600 mr-3">{{$route.meta.title}}</span>
                <img class="img-small" src="../assets/images/010.gif" alt="">
              </div>
            </template>
          </el-page-header>
          <!-- 子路由视图 -->
          <router-view style="padding:8px;" v-wechat-title="$route.meta.title+' · '+systemInfo.systemName"/>
        </el-main>
        <!-- footer -->
        <el-footer :style="{background:homeColor}">
          <div class="Copy">
            {{ copyData }} {{ copyRight }}
          </div>
          <div class="IcpLog">
            <a href="https://beian.miit.gov.cn/">{{ systemInfo.icpNumber }}</a>
            <svg t="1715077799330" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9647" width="200" height="200"><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" fill="#0649D0" p-id="9648"></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" fill="#0649D0" p-id="9649"></path></svg>
            <svg t="1715077772550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8624" width="200" height="200"><path d="M0 512c0 281.6 230.4 512 512 512s512-230.4 512-512S793.6 0 512 0 0 230.4 0 512z" fill="#F6F5F1" p-id="8625"></path><path d="M57.6 512c0 249.6 201.6 454.4 454.4 454.4S966.4 761.6 966.4 512 761.6 57.6 512 57.6 57.6 262.4 57.6 512z" fill="#4E8AC9" p-id="8626"></path><path d="M742.4 371.2c9.6-35.2 12.8-105.6-48-112-48-6.4-108.8 25.6-140.8 48-9.6 0-22.4-3.2-32-3.2-80 0-131.2 25.6-176 86.4-16 22.4-32 57.6-35.2 99.2 22.4-38.4 92.8-112 166.4-140.8 0 0-108.8 80-166.4 195.2-3.2 6.4-6.4 9.6-6.4 16-54.4 134.4-9.6 195.2 32 204.8 38.4 9.6 89.6-9.6 131.2-54.4 70.4 16 140.8-3.2 166.4-16 48-28.8 83.2-76.8 92.8-128h-137.6s-6.4 44.8-80 44.8c-67.2 0-70.4-80-70.4-80h288s6.4-86.4-35.2-144c-22.4-32-54.4-60.8-99.2-73.6 12.8-9.6 35.2-25.6 54.4-32 38.4-9.6 60.8-3.2 76.8 25.6 22.4 38.4-12.8 124.8-12.8 124.8s22.4-25.6 32-60.8z m-297.6 336c-57.6 48-105.6 41.6-121.6 12.8-16-25.6-19.2-70.4 0-131.2 9.6 25.6 22.4 48 41.6 67.2 22.4 25.6 51.2 41.6 80 51.2z m-3.2-249.6s3.2-57.6 64-60.8c51.2-6.4 80 19.2 86.4 64l-150.4-3.2z m0 0" fill="#FFFFFF" p-id="8627"></path></svg>
            <svg t="1715077668978" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6293" width="200" height="200"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="6294"></path><path d="M68.266667 228.2496a34.133333 34.133333 0 0 1 21.879466-31.880533l409.6-157.525334a34.133333 34.133333 0 0 1 24.507734 0l409.6 157.525334a34.133333 34.133333 0 0 1 21.879466 31.880533v318.805333a341.333333 341.333333 0 0 1-179.5072 300.544l-248.046933 133.563734a34.133333 34.133333 0 0 1-32.3584 0l-248.046933-133.563734A341.333333 341.333333 0 0 1 68.266667 547.054933v-318.805333z" fill="#FFAA44" p-id="6295"></path><path d="M512 36.5568a34.133333 34.133333 0 0 0-12.253867 2.286933l-409.6 157.525334A34.133333 34.133333 0 0 0 68.266667 228.2496v318.805333a341.333333 341.333333 0 0 0 179.5072 300.544l248.046933 133.563734a34.133333 34.133333 0 0 0 16.1792 4.096V36.522667z" fill="#11AA66" p-id="6296"></path><path d="M512 238.933333a34.133333 34.133333 0 0 1 34.133333 34.133334v170.666666h170.666667a34.133333 34.133333 0 1 1 0 68.266667h-170.666667v170.666667a34.133333 34.133333 0 1 1-68.266666 0v-170.666667H307.2a34.133333 34.133333 0 1 1 0-68.266667h170.666667V273.066667a34.133333 34.133333 0 0 1 34.133333-34.133334z" fill="#FFFFFF" p-id="6297"></path></svg>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import screenfull from "screenfull";
import {getIpAddress} from '@/utils/ip.js'
import { ElMessageBox } from 'element-plus'
import {useAuthStore} from '@/stores/index'
export default {
  data(){
    return{
      showSide:true,
      copyData:'',
      ip:'',
      copyRight:'\u5c0f\u6c5f\u6c5f\u7cfb\u7edf-\u5931\u806a\u542c\u4f17',
      systemInfo:{},
      loginInfo:{
        userNickName:'江墨白',
        userAccount:'33306',
        userAvatar:'',
        userType:'admin',
        loginTime:'2024-1-2 12:00:00'
      },
      nowYear:'',
      localStorageName:'',
      userInfo:{},
      homeColor:useAuthStore().themColor,
      colors:[
        {value: '#f97b65',label: '红',},
        {value: '#FF9900',label: '橙',},
        {value: '#FFCC00',label: '黄',},
        {value: '#00CC66',label: '绿',},
        {value: '#00CCFF',label: '蓝',},
        {value: '#CC33FF',label: '紫',},
        {value: '#fa93d6',label: '粉',},
        {value: '#909090',label: '暗',},
      ],
    }
  },
  mounted(){
    this.getIp();
    this.nowYear = this.getNowYear()
    this.copyData = 'CopyRight © 2020-'+this.nowYear+' PowerBy '
    this.$reGet.getSysInfoData().then(res=>{this.systemInfo = res.data.data;this.localStorageName = this.systemInfo.sysNumber+'AbsurdActz'})
    this.userInfo = useAuthStore().user
  },
  methods:{
    logOut(){/* 退出登录 */
      ElMessageBox.confirm('退出登录？','Warning',{confirmButtonText: '是的',cancelButtonText: '手滑了',type: 'warning',})
      .then(() => {
        if(localStorage.removeItem(this.localStorageName)){
          this.$router.go(0)
        }else{
          this.$router.go(0)
        }
      })
      .catch(() => {})
    },
    changeColor(val){useAuthStore().themColor = val;},
    shoOrHide(){if(this.showSide){return 'el-aside-show'}else{return 'el-aside-hide'}},/*侧边栏显隐 */
    fullOrExit(){if(screenfull.isEnabled && !screenfull.isFullscreen){screenfull.request()}else{screenfull.exit()}},/* 全屏 */
    getNowYear(){return new Date().getFullYear();},/* 获取当前年份 */
    goBack(){this.$router.go(-1)},/* 返回上一页 */
    getIp(){getIpAddress().then(res=>{this.ip = res.ip})}/* 获取ip */
  }
}
</script>

<style scoped lang="scss">
.test{
  color: #fa93d6;
}
.common-layout{
  width: 100%;
  min-height: 100vh;
  transition: all 1s;
  .el-aside-show{
    width: 200px;
  }
  .el-aside-hide{
    width: 60px;
  }
  .el-aside{
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      background: none;
    }
    background-color: #3f3e3ea3;
    height: 100vh;
    max-width: 200px;
    transition: all 1s;
    overflow-y: auto;
    position: relative;
    padding-top: 96px;
    border-right: 2px solid rgba(49, 164, 41, 0.297);
    .logo{
      min-height: 96px;
      width: 100%;
      background-color: rgb(93, 94, 94);
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      .el-icon{
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #e9eef3;
      }
      .logo-text{
        font-size: 10px;
        color: wheat;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        .el-avatar{
          cursor: pointer;
          background-color: #000000;
          font-size: 12px;
        }
      }
    }
    .el-sub-menu{
      border-bottom: 1px solid black;
      span{
        color: rgb(0, 0, 0);
      }
      .el-icon{
        color: #000000;
      }
    }
  }
  .el-header{
    padding: 5px;
    background-color: #a2eafe;
    min-height: 70px;
    width: 100%;
    min-width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sysBackName{
      cursor: pointer;
      min-width: 90px;
      font-size: 20px;
      text-align: center;
      color: #eee;
      font-weight:bolder; /*设置字体粗细*/
      -webkit-text-stroke:1px #a0a03e;        /*文字描边*/
      -webkit-text-fill-color:transparent;    /*设置文字的填充颜色*/
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
    }
    .sysBackBut{
      width: 100px;
      padding-right: 55px;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-dropdown-menu{
        width: 100%;
      }
      .el-radio-group{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: wrap;
      }
      .el-tag {
        margin-right: 10px;
        max-width: 1.2em;
      }
    }
  }
  .el-main{
    width: 100%;
    min-width: 600px;
    background-color: #e9eef3;
    padding: 0;
    overflow: auto;
    max-height: 85vh;
    .el-page-header{
      padding-left: 5px;
      // border-bottom: 1px solid black;
      background-color: #ffffff;
      color: rgb(103, 103, 103);
      .title{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-flow: nowrap;
        span{
          color: rgb(4, 129, 25);
        }
        .img-small{
          height: 30px;
          padding-left: 5px;
        }
      }
    }
  }
  .el-footer{
    padding: 5px;
    background-color: #a2eafe;
    width: 100%;
    height: 10vh;
    min-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    .icon{
      width: 18px;
      height: 20px;
    }
    .Copy{
      font-size: 13px;
      color: #7e7d7d;
    }
    .IcpLog{
      width: 100%;
      max-width: 350px;
      font-size: 14px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
  }
}
</style>